<template>
  <div class="infowrap infowrap3 indexwrap">
    <el-dialog
      v-model="dialogVisible"
      title="地块编组"
      width="50%"
      custom-class="diyclass"
    >
      <div class="bzwrap">
        <!-- {{ groupInfoGet }} -->
        <div class="group">
          <div class="gleft">
            <div class="gtitle">已选择地块-{{choosed.value.length}}个</div>
            <div class="allbase scrolldiv">
              <div class="allchild" v-for="(item,index) in list" :key="index">
                <div class="nameset">
                    {{item.plotName}}
                </div>
                <img @click="chooseOne(item.id)" v-if="!choosed.value.includes(item.id)" src="@/assets/img/wxz.png" class="xzicon" alt="">
                <img @click="chooseOne(item.id)" v-else src="@/assets/img/xz.png" class="xzicon" alt="">
              </div>
            </div>
            <!-- <div class="tree">
              <el-tree
                :props="propsTree"
                :data="dataTree"
                show-checkbox
                @check-change="handleCheckChange"
                @node-click="clickNode"
                :highlight-current="false"
              />
            </div> -->
          </div>
        </div>
        <div class="bz">
          <div class="bztitle">编组</div>
          
          <div class="mchild">
            <div class="label">编组名称:</div>
            <el-input v-model="groupName" placeholder="请输入名称" clearable />
          </div>
        </div>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button :disabled="overFlag" @click="submit">确认</el-button>
          <el-button type="primary" @click="dialogVisible = false">
            取消
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
    
<script lang="ts">
import { computed,defineComponent,toRefs, ref, reactive, onMounted, onUnmounted } from "vue";
import { useRouter } from "vue-router";
import mapView from "@/components/mapContainer/index2.vue";
import { post, get } from "@/public/request/api";
import { ElMessage } from 'element-plus'
export default defineComponent({
  components: { mapView },
  props:{
    list:Array,
    
  },
  setup(props,{emit}) {
    //变量
    let overFlag=computed({
          get(){
            if(
             choosed.value.length>0&&groupName.value
            ){
              return false
            }else{
              return true
            }
          },
          set(value){
          }
    })
    let groupName=ref('')
    const form = reactive({
      account: "",
      pass: "",
      name: "",
      tel: "",
      areAvalue: "",
      textarea: "",
      date: "",
    });
    let dialogVisible = ref(false);
    let page = ref(1);
    let choosed=reactive({
      value:[]
    })
    const state = reactive(props);
    console.log('state',state)
    const { list } = toRefs(state);
    const propsTree = {
      children: "children",
      label: "label",
    };
    const dataTree = [
      {
        label: "编组01111",
        children: [
          {
            label: "地块01",
          },
          {
            label: "地块02",
          },
        ],
      },
      {
        label: "编组02",
        children: [
          {
            label: "地块01",
          },
          {
            label: "地块02",
          },
        ],
      },
    ];
    const areaOptions = [
      {
        value: "",
        label: "地块1",
      },
      {
        value: "",
        label: "地块2",
      },
      {
        value: "",
        label: "地块3",
      },
    ];
    const manOptions = [
      {
        value: "",
        label: "李宁",
      },
      {
        value: "",
        label: "张三",
      },
    ];
    // 生命周期
    onMounted(() => {
      
    });

    onUnmounted(() => {
      //
    });

    //methods
    function handleCheckChange() {}
    function clickNode() {}
    function goStep(val) {
      if (page.value < 2) {
        page.value += val;
      } else {
        dialogVisible.value = false;
      }

      console.log("page", page);
    }
    function chooseOne(id){
      let find=choosed.value.findIndex(item=>{
        return item==id
      })
      console.log(find)
      if(find==-1){
        choosed.value.push(id)
      }else{
        choosed.value.splice(find,1)
      }
      
    }
    
    function submit(){
      post("/plot/gandUp", {
        "plotGroupName": groupName.value,
	      "plotIds": choosed.value
      }).then((res) => {
        if(res.code==200){
          emit('getGroupList')
          ElMessage({
            message: "新增成功",
            type: "success",
          });
          dialogVisible.value = false
        }
      }).catch(err=>{
        ElMessage({
            message: err.message,
            type: "error",
          });
      })
      
     
    }
    // return
    return {
     
      
      submit,
      groupName,
      overFlag,
      choosed,
      dialogVisible,
      propsTree,
      dataTree,
      form,
      areaOptions,
      manOptions,
      goStep,
      page,
      handleCheckChange,
      clickNode,
      list,
      chooseOne
    };
  },
});
</script>
<style lang="scss">
.indexwrap {
  .el-tree {
    background: transparent !important;
  }
  .el-tree-node:hover,
  .el-tree-node__content:hover {
    background: transparent !important;
  }
  .el-tree-node,
  .el-tree-node__content {
    background: transparent !important;
  }
}
</style>
<style lang="scss">
.m-2 {
  margin: 0 !important;
}
.infowrap3 {
  .el-input__wrapper,
  .el-textarea__inner {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: none !important;
  }
  .el-date-editor.el-input {
    width: 530px;
  }

  .el-select .el-input__wrapper {
    width: 535px;
    border: none !important;
    height: 33px;
    background: rgba(255, 255, 255, 0.08);
  }
  .el-select--large {
    line-height: 30px !important;
    height: 30px !important;
  }
}
.leftselect {
  .el-select .el-input__wrapper {
    background: rgba(255, 255, 255, 0.08) !important;
    width: 200px;
    border-radius: 200px;
    border: none !important;
  }
}
</style>
  
    <style lang="scss" scoped>
    .xzicon{
      width: 20px;
      height: 20px
    }
@import "@/assets/scss/index.scss";
.allbase{
  max-height: 240px;
  overflow-y: auto;
  margin-top: 10px;
  .allchild{
    display: flex;
    align-items: center;
    width: 90%;
    justify-content: space-between;
    color: #ccc;
    margin-top: 5px;
  }
}
.bzwrap{
    display: flex;
    .bz{
      flex: 1;
      
    }
    .gtitle{
        color: #ccc;
        font-size: 18px;
    }
    .mchild{
        display: flex;
        align-items: center;
        .label{
            width: 90px;
        }

    }
    .gleft{
        width: 300px;
        margin-right: 20px;
    }
    .bztitle{
        font-size: 20px;
        color: #fff;
        display: flex;
        justify-content: center;
        margin-bottom: 30px;
    }

}
.pagewrap {
  margin-top: 20px;
}
.bntss {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 35px;
  .one {
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 5px;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    span {
      margin-right: 5px;
      position: relative;
      top: 2px;
    }
    .span2 {
      margin-left: 5px;
      margin-right: 0px !important;
    }
  }
  .one2 {
    margin-left: 40px;
    background: rgba(9, 127, 229, 1) !important;
  }
}
.mapwrap {
  width: 100%;
  height: 600px;
  position: relative;
  margin-top: 20px;
}
.pc {
  display: flex;
  align-items: flex-start;
  margin-bottom: 10px;

  .red {
    color: red;
  }
  .name1 {
    width: 100px;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-right: 10px;
  }
}
.icon2dk {
  border-radius: 10px;
  margin-top: 10px;
}
.btnc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-right: 20px;
  padding: 10px 14px;

  border-radius: 5px;
  background: rgba(9, 127, 229, 1);
  cursor: pointer;
  color: #fff;
  width: 140px;
}
.pagename {
  color: #fff;
  display: flex;
  justify-content: center;
  font-size: 20px;
}
.zywrap {
  display: flex;
  .mcontent2 {
    margin-right: 20px;
  }
}
.picset {
  display: flex;
  align-items: center;
  .remark {
  }
  .xgsmall {
    margin-right: 10px;
  }
  .add {
    border-radius: 5px;
    width: 130px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
  }
}
.infowrap {
  .content4 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .cchild {
      background: rgba(255, 255, 255, 0.08);
      border-radius: 15px;
      padding: 20px;
      width: 24%;
      margin-top: 20px;
      margin-right: 10px;
      .big {
        font-size: 20px;
      }
      .p3 {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .p3child {
          width: 49%;
          display: flex;
          justify-content: space-between;
          margin-top: 20px;
          .p3label {
            color: rgba(255, 255, 255, 0.6);
          }
          .num {
            font-weight: bold;
            font-size: 20px;
          }
        }
      }
      .p2 {
        display: flex;
        justify-content: space-around;
        .text {
          margin-left: 15px;
        }
        .p2left {
          display: flex;
          align-items: center;
          .name {
            font-weight: bold;
          }
          .label {
            color: rgba(255, 255, 255, 0.6);
            font-size: 14px;
          }
        }
        .zz {
          width: 60px;
          padding: 3px;
          background: #fff;
          border-radius: 300px;
        }
      }
      .p1 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
        .pbtn {
          display: flex;
          align-items: center;
          .pbnt1 {
            background: rgba(9, 127, 229, 1);
            border-radius: 5px;
            font-size: 10px;
            padding: 2px 15px;
            box-sizing: border-box;
            cursor: pointer;
          }
          .pbnt2 {
            background: rgba(255, 255, 255, 0.16) !important;
            margin-left: 10px;
          }
        }
      }
    }
  }

  .panelben3 {
    margin-top: 20px;
  }
  .btnwrap {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
    width: 400px;

    .btnc {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-right: 20px;
      padding: 10px 14px;
      margin-top: 10px;
      border-radius: 5px;
      background: rgba(9, 127, 229, 1);
      cursor: pointer;
    }
    .icon2 {
      width: 14px;
      margin-right: 6px;
    }
  }

  .content2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
  }
  .cc {
    display: flex;
    background: rgba(255, 255, 255, 0.08);
    flex-direction: column;
    padding: 15px;
    border-radius: 10px;
    width: 19%;
    .cct2 {
      display: flex;
      font-size: 30px;
      font-weight: bold;
      margin-top: 10px;
      align-items: center;
      .icon {
        width: 50px;
        margin-right: 12px;
      }
    }
  }
}
</style>
    